<%@include file="../common/IncludeTop.jsp"%>
<div id="Welcome">
    <div id="WelcomeContent">
        Welcome to MyPetStore!
    </div>
</div>
<div id="context2" style="background:white;border: 1px solid black;width: 320px;height: 600px;position: absolute;top: 100px;left:1000px;display:none "></div>
<script src="js/jquery-3.6.0.min.js">
</script>
<script>
    $(document).ready(function(){
        $("#FISH_EXPLAIN").mouseenter(function(e){
            $("#context2").width(320).height(200).css("display","block")
            .html("There are four types of fish:<br>" +
                "<br>Koi:Fresh Water fish from Japan<br>" +
                "<br>Goldfish:Fresh Water fish from China<br>" +
                "<br>Angelfish:Salt Water fish from Australia<br>" +
                "<br>Tiger Shark:Salt Water fish from Australia<br>" +
                "<img src='images/fish2021.jpg' width='320'> ")
           .offset({top:e.pageY-200,left:e.pageX-320});

        }).mouseleave(function(){
            $("#context2").css("display","none").html("");
        });
        $("#DOGS_EXPLAIN").mouseenter(function(e){
            $("#context2").width(320).height(300).css("display","block")
                .html("There are six types of dogs:<br>" +
                "<br>Bulldog:Friendly dog from England<br>" +
                "<br>Chihuahua:Great companion dog<br>" +
                "<br>Dalmation:Great dog for a Fire Station<br>" +
                "<br>Poodle:Cute dog from France<br>" +
                "<br>Golden Retriever:Great family dog<br>" +
                "<br>Labrador Retriever:Great hunting dog<br>"+
                "<img src='images/dog2021.jpg' width='320'> ")
                .offset({top:e.pageY-300,left:e.pageX-320});})
        .mouseleave(function(){
            $("#context2").css("display","none").html("");
        });
        $("#REPTILES_EXPLAIN").mouseenter(function(e){
            $("#context2").width(320).height(130).css("display","block")
                .html("There are two types of reptiles:<br>" +
                "<br>Iguana:Friendly green friend<br>" +
                "<br>Rattlesnake:Doubles as a watch dog<br>"+
                "<img src='images/xiyi2021.jpg' width='320'> ")
                .offset({top:e.pageY-130,left:e.pageX-320});})
            .mouseleave(function(){
            $("#context2").css("display","none").html("");
        });
        $("#CATS_EXPLAIN").mouseenter(function(e){
            $("#context2").width(390).height(110).css("display","block")
                .html("There are two types of cats:<br>" +
                "<br>Persian:Friendly house cat, doubles as a princess<br>" +
                "<br>Manx:Great for reducing mouse populations<br>"+
                "<img src='images/cat2021.jpg' width='390' height='280'> ")
                .offset({top:e.pageY-110,left:e.pageX});})
            .mouseleave(function(){
            $("#context2").css("display","none").html("");
        });
        $("#BIRDS1_EXPLAIN").mouseenter(function(e){
            $("#context2").width(400).height(110).css("display","block")
                .html("There are two types of birds:<br>" +
                "<br>Amazon Parrot:Great companion for up to 75 years<br>" +
                "<br>Finch:Great stress reliever<br>"+
                "<img src='images/bird2021.jpg' width='400'> ")
                .offset({top:e.pageY-110,left:e.pageX});})
        .mouseleave(function(){
            $("#context2").css("display","none").html("");
        });
        $("#BIRDS2_EXPLAIN").mouseenter(function(e){
            $("#context2").width(400).height(110).css("display","block")
                .html("There are two types of birds:<br>" +
                "<br>Amazon Parrot:Great companion for up to 75 years<br>" +
                "<br>Finch:Great stress reliever<br>"+
                "<img src='images/bird2021.jpg' width='400'> ")
                .offset({top:e.pageY-110,left:e.pageX});})
       .mouseleave(function(){
            $("#context2").css("display","none").html("");
        });

    });
</script>
<div id="Main">
    <div id="Sidebar">
        <div id="SidebarContent">
            <a href="ViewCategory?categoryId=FISH"><img src="images/fish_icon.gif" /></a>
            <br/> Saltwater, Freshwater <br/>
            <a href="ViewCategory?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a>
            <br /> Various Breeds <br />
            <a href="ViewCategory?categoryId=CATS"><img src="images/cats_icon.gif" /></a>
            <br /> Various Breeds, Exotic Varieties <br />
            <a href="ViewCategory?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a>
            <br /> Lizards, Turtles, Snakes <br />
            <a href="ViewCategory?categoryId=BIRDS"><img src="images/birds_icon.gif" /></a>
            <br /> Exotic Varieties
        </div>
    </div>
    <div id="MainImage">
        <div id="MainImageContent">
            <map name="estoremap">
                <area alt="Birds" coords="72,2,280,250" href="ViewCategory?categoryId=BIRDS" shape="rect" id="BIRDS1_EXPLAIN"/>
                <area alt="Fish" coords="2,180,72,250" href="ViewCategory?categoryId=FISH" shape="rect"  id="FISH_EXPLAIN" />
                <area alt="Dogs" coords="60,250,130,320" href="ViewCategory?categoryId=DOGS" shape="rect" id="DOGS_EXPLAIN"/>
                <area alt="Reptiles" coords="140,270,210,340" href="ViewCategory?categoryId=REPTILES" shape="rect" id="REPTILES_EXPLAIN"/>
                <area alt="Cats" coords="225,240,295,310" href="ViewCategory?categoryId=CATS" shape="rect" id="CATS_EXPLAIN"/>
                <area alt="Birds" coords="280,180,350,250" href="ViewCategory?categoryId=BIRDS" shape="rect" id="BIRDS2_EXPLAIN"/>
            </map>
            <img height="355" src="images/splash.gif" align="middle" usemap="#estoremap" width="350" />
        </div>
    </div>
    <div id="Separator">&nbsp;</div>
</div>
<%@include file="../common/IncludeBottom.jsp"%>